<template >
  <div class="app">
    <div>
      <video_Head />
    </div>
    <div>
      <Customize_Head_control @clientId="getClientId" />
    </div>
    <div class="content">
      <div class="up">
        <dv-border-box-8 class="left"  :color="['#18213e','#18213e']">
          <backTimeMap :clientId="clientId" :time="time" v-if="fag"> </backTimeMap>
        </dv-border-box-8>
        <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">  
          <rtvsBack  class="rtvsBack" :clientId="clientId" :time="time"    v-if="fag" ></rtvsBack>
        </dv-border-box-8>
      </div>
      <div class="down">
        <div class="timeline">
          <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
          <Timeline :clientId="clientId"  @time="getTime" @date="getDate"/>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>

import Customize_Head_control from "@/components/video/Customize-Head-control"
import Timeline from "@/components/video/TimeLine";
import rtvsBack from "@/components/video/rtvs-back";
import backTimeMap from "@/components/video/back-time-map"
import video_Head from "@/components/video/Video_head"
export default {
  props: {

  },

  components: {  Customize_Head_control, rtvsBack, Timeline,backTimeMap,video_Head },
  data: function () {
    return {
      fag: false,
      content: '',
      clientId: "",
      list: [],
      channelNo: 1,
      mediaType: 1,
      realTime: 0,
      time:[],

    }
  },
  mounted() {
  },
  methods: {
    getClientId(val) {
      this.fag = false;
      this.clientId = val
      this.time=[]
    },

    getTime(val){
      if (val!=null) {
        this.fag = false;
        this.time=val;
        this.fag = true;
      }
    },
    getDate(){
      this.fag = false;
      
    }
  }
}

</script>
<style scoped>
.app{
 
 height: 100vh;
 background-image: url("../assets/img/pageBg.png");
}
/* 控制按钮 */
.content {
  margin-top: 10px;
  width: 100%;
  height: 83vh;
}

.up {
  width: 100%;
  height: 66vh;

}

.down {
  width: 98%;
  margin-left: 1%;
  margin-top: 1.2%;
  height: 10vh;
}

.left {
  width: 52%;
  height: 66vh;
  background-color: rgb(17, 16, 16);
  margin-left: 1%;
  float: left;
}

.right {
  width: 45%;
  float: left;
  height: 66vh;
  margin-left: 1%;
  background-color: rgb(17, 16, 16);
}
.rtvsBack{
  margin-top: 10px;
  margin-left: 10px;
}


.timeline {
  width: 100%;
  height: 145px;
  background-color: #111010;
  color: white;
}

:deep(.el-input) {
  background-color: #10191b;
}

:deep(.el-input__wrapper) {
  background-color: #10191b;
}

:deep(.el-input__inner) {
  color: white;
}
</style>
  